<template>
  <view class="userInfo">
    <CommonHeader>打卡</CommonHeader>
    <view class="content">
      <van-tabs
        :active="active"
        color="#419488"
        border="true"
        nav-class="nav-class"
      >
        <!-- 日常打卡 -->
        <van-tab title="日常打卡">
          <view
            class="normal-punch-card"
            :class="workPunchCardState.buttonStyle"
          >
            <view class="punch-card-logo">
              <img class="main-logo" :src="workPunchCardState.mainLogo" />
              <view class="side-logo">
                <img :src="workPunchCardState.sideLogo" />
              </view>
            </view>
            <view class="punch-card-title">
              {{ workPunchCardState.buttonText }}
            </view>
            <view class="punch-card-button" @click="normalPunchCardClick">
              <view class="punch-card-button-desc">
                {{ normalPunchCardInfo }}
              </view>
              <view class="punch-card-time">
                {{ nowTime }}
              </view>
            </view>
            <view class="punch-card-position">
              <img src="@/static/location.svg" alt="" />
              {{ nowArea }}
            </view>
            <view class="punch-card-tips">
              <view class="work">
                <view class="work-title"> 上班{{ workTime }} </view>
                <view class="work-desc">
                  <view class="card-info">
                    <img src="@/static/correct.svg" v-show="ifWorkingPunch" />
                    <img src="@/static/error.svg" v-show="!ifWorkingPunch" />
                    <view class="info-text">
                      {{ workingTime }}
                    </view>
                  </view>
                  <view class="card-reload" v-if="false">
                    更新打卡
                  </view>
                </view>
              </view>
              <view class="get-off-work">
                <view class="get-off-work-title"> 下班{{ leaveTime }} </view>
                <view class="get-off-work-desc">
                  <view class="card-info">
                    <img src="@/static/correct.svg" v-show="ifAfterWorkPunch" />
                    <img src="@/static/error.svg" v-show="!ifAfterWorkPunch" />
                    <view class="info-text">
                      {{ getOffWorkTime }}
                    </view>
                  </view>
                  <view
                    class="card-reload"
                    :id="workPunchCardState.textStyle"
                    v-show="ifAfterWorkPunch"
                    @click="normalPunchCardClick"
                  >
                    更新打卡
                  </view>
                </view>
              </view>
            </view>
          </view>
        </van-tab>
        <!-- 外勤打卡 -->
        <van-tab title="外勤打卡">
          <view class="field-clock-punch-card">
            <view class="punch-card-logo">
              <img class="main-logo" src="@/static/field-card.svg" />
            </view>
            <view class="punch-card-title">
              如果是拜访客户，请填写拜访信息哦！
            </view>
            <view
              class="visiting-information"
              @click="visitingInformationDialogShow"
            >
              {{ fillInTheVisits }}
            </view>
            <view class="punch-card-button" @click="visitingPunchCardClick">
              <view class="punch-card-button-desc">
                外勤打卡
              </view>
              <view class="punch-card-time">
                {{ nowTime }}
              </view>
            </view>
            <view class="punch-card-area" @click="goTo('/pages/classification/homepage/area-selector/index')">
              <img src="@/static/location.svg" />
              {{ visitingArea }}
            </view>
            <view class="punch-card-area-tips">
              此处定位信息可以点击更换
            </view>
            <view class="history-list" @click="goTo('/pages/classification/homepage/visiting-list/index')">
              <p>本日外勤打卡记录 ⇨</p>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>
    <van-toast id="van-toast" />
    <van-dialog
      :show="visitingInformationDialogIsShow"
      title="拜访信息"
      use-slot
      show-cancel-button
      @cancel="visitingInformationDialogHide"
      @confirm="handleConfirm"
    >
      <view class="dialog-content">
        <textarea
          v-model="visitingInformationAreaContent"
          class="visitingInformationArea"
          maxlength="”200”"
          autofocus
        ></textarea>
      </view>
    </van-dialog>
  </view>
</template>
<script src="./script.js"></script>
<style lang="less" src="./style.less"></style>
